<template>
  <div class="shop-home">
    <!-- 遍历楼层数据 -->
    <div v-for="(floor, index) in floorList" :key="index">
      <div id="banner" v-if="floor.floorType == 'Banner'">
        <w-banner :lists="initFloorList(floor)"></w-banner>
      </div>
      <!-- 商品分类 -->
      <div id="classify" class="app-container" v-if="floor.floorType == 'Classify'">
        <w-button-group>
          <w-button v-for="(nav, index) in floor.childs" :key="index" @on-click="onSelectNav(nav)">{{nav.floorName}}</w-button>
        </w-button-group>
      </div>
      <!-- 店家推荐 -->
      <div id="recomment" v-if="floor.floorType == 'Templet3'">
        <home-floor :type="floor.displayMode" :floor-name="floor.floorName" :floor-src="floor.floorPhoto"></home-floor>
        <section class="home-recommend app-container">
          <div class="img-wrap clearfix mb36" v-if="floor.goodsInfoList && floor.goodsInfoList.length">
            <div class="main fl">
              <router-link :to="getGoodsDetailUrl(floor.goodsInfoList[0].goodsId)">
                <img v-lazy="floor.goodsInfoList[0].goodsMainPhoto" alt="floor.goodsInfoList[0].goods_name">
              </router-link>
              <h4><router-link class="goods-name" :title="floor.goodsInfoList[0].goods_name" :to="getGoodsDetailUrl(floor.goodsInfoList[0].goodsId)">{{floor.goodsInfoList[0].goods_name}}</router-link><strong>￥{{floor.goodsInfoList[0].store_price || 0}}</strong></h4>
            </div>
            <div class="sub fr">
              <div class="img-box" v-if="floor.goodsInfoList[1]">
                <router-link :to="getGoodsDetailUrl(floor.goodsInfoList[1].goodsId)">
                  <img v-lazy="floor.goodsInfoList[1].goodsMainPhoto" alt="floor.goodsInfoList[1].goods_name">
                </router-link>
                <h4><router-link class="goods-name" :title="floor.goodsInfoList[1].goods_name" :to="getGoodsDetailUrl(floor.goodsInfoList[1].goodsId)">{{floor.goodsInfoList[1].goods_name}}</router-link><strong>￥{{floor.goodsInfoList[1].store_price || 0}}</strong></h4>
              </div>
              <div class="img-box" v-if="floor.goodsInfoList[2]">
                <router-link :to="getGoodsDetailUrl(floor.goodsInfoList[2].goodsId)">
                  <img v-lazy="floor.goodsInfoList[2].goodsMainPhoto" alt="floor.goodsInfoList[2].goods_name">
                </router-link>
                <h4><router-link class="goods-name" :title="floor.goodsInfoList[2].goods_name" :to="getGoodsDetailUrl(floor.goodsInfoList[2].goodsId)">{{floor.goodsInfoList[2].goods_name}}</router-link><strong>￥{{floor.goodsInfoList[2].store_price || 0}}</strong></h4>
              </div>
            </div>
          </div>
        </section>
      </div>
      <!-- 新款发布  -->
      <div id="new-style" v-if="floor.floorType == 'Templet2'">
        <home-floor :type="floor.displayMode" :floor-name="floor.floorName" :floor-src="floor.floorPhoto"></home-floor>
        <section class="home-new app-container" v-if="floor.goodsInfoList && floor.goodsInfoList.length">
          <div class="clearfix style">
            <router-link class="fl box" :to="getGoodsDetailUrl(floor.goodsInfoList[0].goodsId)">
              <img v-lazy="floor.goodsInfoList[0].goodsMainPhoto">
            </router-link>
            <router-link class="fr box" :to="getGoodsDetailUrl(floor.goodsInfoList[0].goodsId)">
              <img v-lazy="floor.goodsInfoList[0].goodsInfoPhotePath && floor.goodsInfoList[0].goodsInfoPhotePath[0]">
            </router-link>
          </div>
          <h4 class="style">￥{{floor.goodsInfoList[0].store_price || 0}}</h4>
          <div class="clearfix style" v-if="floor.goodsInfoList[1]">
            <router-link class="fl box" :to="getGoodsDetailUrl(floor.goodsInfoList[1].goodsId)">
              <img v-lazy="floor.goodsInfoList[1].goodsMainPhoto">
            </router-link>
            <router-link class="fr box" :to="getGoodsDetailUrl(floor.goodsInfoList[1].goodsId)">
              <img v-lazy="floor.goodsInfoList[1].goodsInfoPhotePath && floor.goodsInfoList[1].goodsInfoPhotePath[0]">
            </router-link>
          </div>
          <h4 class="style">￥{{floor.goodsInfoList[1].store_price || 0}}</h4>
        </section>
      </div>
      <!-- 尾货清仓  -->
      <div id="clear" v-if="floor.floorType == 'Templet'">
        <home-floor :type="floor.displayMode" :floor-name="floor.floorName" :floor-src="floor.floorPhoto"></home-floor>
        <section class="home-clear app-container">
          <ul class="clearfix clear" v-if="floor.goodsInfoList && floor.goodsInfoList.length">
            <li class="item" v-for="(goods, index) in floor.goodsInfoList" :key="index">
              <router-link :to="getGoodsDetailUrl(goods.goodsId)">
                <img v-lazy="goods.goodsMainPhoto">
              </router-link>
              <div class="title">
                <h4>
                  <strong>￥{{goods.store_price || 0}}</strong>
                  <span><i class="collect"></i> {{goods.goods_collect}}</span>
                </h4>
                <router-link :to="getGoodsDetailUrl(goods.goodsId)">{{goods.goods_name}}</router-link>
              </div>
            </li>
          </ul>
        </section>
      </div>
    </div>
  </div>
</template>
<script>
  import HomeFloor from './components/homeFloor'
  import { apiShopFloor } from 'js/api'

  export default {
    data() {
      return {
        storeId: '',
        // 分类报文列表
        floorList: []
      }
    },
    created() {
      this.initFetchHomeData()
    },
    methods: {
      /**
       * 初始化banner的列表
       *
       * @param  { Object } v 当前楼层对象
       */
      initFloorList(v) {
        // 如果当前是轮播图楼层
        if (v.floorType == 'Banner') {
          // 轮播图
          let bannerList = []

          // 获取商品图片
          v.childs.forEach((v1) => {
            // 如果当前是商品链接
            if (v1.linkedProductType == 1) {
              bannerList.push({
                value: v1.linkedProductUrl,
                type: 'link',
                image: v1.floorPhoto
              })
            } else {
              bannerList.push({
                value: `/shop/${this.storeId}/type?type=floor&floorId=${v1.id}`,
                type: 'searchInStore',
                image: v1.floorPhoto
              })
            }
          })
          console.log(bannerList)
          return bannerList
        }
        // 如果当前其他楼层
        return v
      },

      /**
       * 第一次进入，初始化数据
       */
      initFetchHomeData() {
        this.storeId = this.$route.params.id

        // 获取店铺楼层接口
        apiShopFloor(this.storeId).then(data => {
          // 如果楼层没有获取到，则不处理
          if (!data.VisualFloorList) {
            return
          }

          // 保存楼层数据
          this.floorList = data.VisualFloorList

          // 按照排序字段进行排序（升序排列）
          this.floorList.sort((a, b) => { return a.sequence - b.sequence })
        })
      },
      /**
       * 被选中的导航
       * @param  { Object } nav 导航对象
       */
      onSelectNav(nav) {
        // 如果当前是商品链接
        if (nav.linkedProductType == 1) {
          // 跳转链接
          window.location.href = nav.linkedProductUrl
          return
        }

        // 跳转页面
        this.$router.push(`/shop/${this.storeId}/type?type=floor&floorId=${nav.id}`)
      },

      /**
       * 获取商品详情链接
       *
       * @params {Number} id 商品ID
       */
      getGoodsDetailUrl(id) {
        return `/goods/detail/${id}`
      }
    },
    components: {
      HomeFloor
    },
    watch: {
      $route(to, from) {
        if (to.params.id != from.params.id) {
          this.initFetchHomeData()
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    .img-wrap, .style {
      width: 900px;
      margin: 0 auto;
    }

    .clear {
      width: 1000px;
      margin: 0 auto;
    }
  }
  #classify, #recomment, #new-style, #clear {
    padding-top: 10px;
  }
  .collect {
    background: url('../../assets/ico_index_collect.png');
    display: inline-block;
    width: 14px;
    height: 14px;
  }
  .btn-group {
    text-align: center;
    margin: 30px 0 44px 0;
    .btn {
      border-radius: 0;
      padding: 0;
      width: 160px;
      height: 60px;
      margin-right: 6px;
      font-size: 20px;
      background: #000;
      color: #fff;
      &:nth-of-type(n+7) {
        margin-top: 6px;
      }
    }
  }
  h4 {
    height: 62px;
    line-height: 62px;
    font-size: 15px;
    font-weight: 500;
    a {
      font-size: 15px;
    }
  }
  section {
    margin-bottom: 50px;
  }
  .home-recommend {
    padding: 0 50px;

    .goods-name {
      display: inline-block;
      max-width: 200px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .img-wrap {
      overflow: hidden;
      &.mb36 {
        margin-bottom: 36px;
      }
      .main {
        width: 600px;
        img {
          height: 600px;
        }
        h4 {
          text-align: center;
          strong {
            padding-left: 24px;
          }
        }
      }
      .sub {
        .img-box {
          width: 270px;
          img {
            height: 270px;
          }
        }
        h4 {
          overflow: hidden;
          strong {
            float: right;
          }
        }
      }
    }
  }
  .home-new {
    padding: 0 50px;
    .box {
      width: 440px;
      height: 440px;
    }
    h4 {
      text-align: right;
    }
  }
  .home-clear {
    .item {
      background-color: white;
      float: left;
      width: 320px;
      height: 440px;
      margin-right: 20px;
      margin-bottom: 30px;
      &:nth-child(3n+3) {
        margin-right: 0;
      }
      img {
        height: 320px;
      }
      .title {
        padding: 12px 24px;
        background: #fff;
        word-break: break-all;

        h4 {
          height: 48px;
          line-height: 48px;
          span {
            float: right;
            font-size: 14px;
          }
        }
        a {
          line-height: 22px;
          font-size: 12px;
        }
      }
    }
  }
</style>